<template>
<div class="login-form">
<div class="g-form">
    <div class="g-form-line">
        <span class="g-form-label">用户名:</span>
        <div class="g-form-input">
        <input type="text"
        v-model="userNameModel" placeholder="请输入用户名" />
       <span class="g-form-error">{{userErrors.errorText}}</span>
        </div>
    </div>
    <div class="g-form-line">
        <span class="g-form-label">密码:</span>
        <div class="g-form-input">
        <input type="password"
        v-model="passWordModel" placeholder="请输入密码" />
        <span class="g-form-error">{{passWordErrors.errorText}}</span>
        </div>
    </div>
    <div class="g-form-line">
        <div class="g-form-btn">
            <button class="button" @click="onLogin">登录</button>
        </div>
    </div>
    <span>{{errorText}}</span>
</div>
</div>
</template>
<script>
export default {
    data(){
        return{
            userNameModel:'',
            passWordModel:'',
            errorText:'',
        }
    },
    computed:{
        userErrors(){
            let errorText,status,userFlag
            if(!/@/g.test(this.userNameModel)){
                status=false
                errorText = "所输入内容不包含@" 
            }else{
                status=true
                errorText = "" 
            }
             if(!this.userFlag){
                    errorText=''
                    this.userFlag=true
                }
            return {
                status,
                errorText
            }
        },
        passWordErrors(){
             let errorText,status,userFlag
                if(!/^\w{1,6}$/g.test(this.passWordModel)){
                    status=false
                    errorText = "密码应该是1-6位" 
                }else{
                    status=true
                    errorText = "" 
                }
                if(!this.passFlag){
                    errorText=''
                    this.passFlag=true
                }
                return {
                    status,
                    errorText
                }
        }
    },
    methods:{
        onLogin(){
            console.log(this.userNameModel,this.passWordModel)
            if(!this.userErrors.status||!this.passWordErrors.status){
                this.errorText='部分选项未通过'
            }else{
                this.errorText=''
                console.log('正在登陆');
                this.$http.get('api/login')
                .then((res)=>{
                    console.log(res.data)
                     console.log(res.data.username)
                      console.log(res.data.userid)
                      this.$emit('has-log',res.data)
                },(error)=>{
                    console.log(error)
                })
            }
        }
    }
}
</script>
<style>

</style>
